<template>
                
	<div class="orderSure">
        <div class="shopNameHead">
            <img src="../assets/img/about-img1.jpg" alt="" class="shopNameBg">
            <b></b>
            <div class="shopName">
                <img src="http://placeholder.qiniudn.com/60x60/3cc51f/ffffff" alt="" class="shoplogo">
                <h4>{{bpName}}</h4>
                <p>{{price}}<span> 元</span></p>
            </div> 
            <i>普通预付卡</i>
        </div>
        <div class="paymoney">
            <p>购卡金额<span>￥{{price}}</span></p>
            
        </div>

        <div class="btn">
            <button type="primary" action-type="button" @click="sdkclick" id="BtnSdk" autofocus="autofocus">购买</button>
        </div>
	</div>
</template>
<script>
	import { Cell, Panel,XInput,XButton,Card , CellFormPreview,FormPreview,Radio, Group} from 'vux'
	export default {
		data (){
			return {
                price:this.price,
                head:[{
                    src:'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                    title: '星巴克',
                    desc:this.desc,
                    replace: false
                }]
			
			}
		},
		components: {
            Radio, 
            Group,
            FormPreview,
            Cell,
            XInput,
            XButton ,
			Card,
            Panel,
			CellFormPreview 
		},
        ready: function(){
            console.log('deviceid: ' + this.$route.params.deviceId);
            console.log('dataId: ' + this.$route.params.dataId);
        },
        
        beforeCreate:function(){
            this.price=localStorage.getItem('price')
            this.bpName=localStorage.getItem('bpName')
        },
        created:function(){     
        },
		methods: {
			change (value) {
                console.log('change:', value)		
            },
            sdkclick: function () {
                var price=localStorage.getItem('price')
                var oldprice=localStorage.getItem('oldprice')
                var productNo=localStorage.getItem('productNo')
                let payDetail ={"title":"购买卡","amount":price,"payableAmount":oldprice,"orderType":"card_purchase","itemInfo":{"unitPrice":oldprice,"price":price,"productNo":productNo,"quantity":1}}
                let xx = localStorage.getItem('sessionId')
                this.$http.post("http://192.168.100.106:8881/top/api/order/createOrderInfo",payDetail,{headers: {userSessionId: xx    }}).then(function(res){
                   if(res.body.returnCode == -1){
                       window.localStorage.setItem('OrderSure',"not");
                       this.$router.push('/UserLogin')
                   }else if(res.body.returnCode == 0){  
                        
//                       var paytype=document.getElementsClassName("weui-cells__title")[0].innerText; 
//                        var smamount=document.getElementsClassName("weui-cell__ft")[0];            
                       window.localStorage.setItem('OrderSure',"");
                        var amount=res.body.returnValue.amount;
                        var out_order_no=res.body.returnValue.out_order_no;
                        var order_type=res.body.returnValue.order_type;
//                        window.localStorage.setItem('cardname',cardname);
                        window.localStorage.setItem('amount',amount);     window.localStorage.setItem('out_order_no',out_order_no); 
                        window.localStorage.setItem('order_type',order_type);
                        console.log(amount);
                        phoneSDK();
                        
                   }
                    
                   
               },function(){
                   alert('请求失败处理');   //失败处理
               })
            },
            paysure: function () {
                this.$router.push('/GiveFriend')
            },
            paysure1: function () {
                let xx = localStorage.getItem('sessionId')
               var node={"out_trade_no":"4125937086412593708641259370864125937086412593708641259370864125937086412593708641259370864125937085","state":"pay_success"}
               this.$http.post("http://192.168.100.106:8881/top/api/pay/notifyConfirmPay",node,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(res){
                   if(res.body.returnCode == 0){  
                        
          var amount=res.body.returnValue.amount;
                        var out_order_no=res.body.returnValue.out_order_no;
                        var order_type=res.body.returnValue.order_type;
//                        window.localStorage.setItem('cardname',cardname);
                        window.localStorage.setItem('amount',amount);     window.localStorage.setItem('out_order_no',out_order_no); 
                        window.localStorage.setItem('order_type',order_type);
                        console.log(amount);
                        phoneSDK();
                        
                   }
                    
                   
               },function(){
                   alert('请求失败处理');   //失败处理
               })
            }
	
        }
			
    }
	</script>
<style>
    .orderSure{background-color:#f5f5f9;padding-top:4.5vh;}
    .orderSure .weui-cell:before{border:0;}
    .shopNameHead{margin:0 5.9vw 6vh 5.9vw; border-radius:5%;}
    .orderSure .shopName{background-color:rgba(0,0,0,0); text-align: center; position: relative; z-index:9;padding-top:3vh;}
    .shopName img{border-radius:50%;}
    .orderSure .shopName .shoplogo{width:25.3vw; height:25.3vw; margin:0;display:inline-block;}
    .shopName h4{font-weight:normal;height:5.2vh; line-height:5.2vh; margin:0; font-size:4.5vw;}
    .shopName p{height:6.7vh; line-height:6.7vh; margin:0; font-size:8vw; color:#1a1a1a; margin-bottom:2.2vh;}
    .shopName p span{ font-size:4.5vw;}
    a:-webkit-any-link{text-decoration:none;}
    .orderSure .paymoney{ height:6.75vh;background-color:#fff; padding:0 3.2vw;color:#000; line-height:6.75vh;}
    .orderSure .paymoney p span{float:right;}
    .orderSure .weui-cells{font-size:2.3vh;}
    .orderSure .weui-cells_radio .weui-check:checked + .weui-icon-checked:before{margin:0; background-image:url(../assets/img/icon_choose-@2x.png);background-size:contain; background-repeat:no-repeat; background-position:center; color:rgba(0,0,0,0)}
    .orderSure .weui-icon-checked{margin:0; background-image:url(../assets/img/icon_weixuan-@2x.png);background-size:contain; background-repeat:no-repeat; background-position:center; width:16px; height:16px;}
    .orderSure .shopNameHead{position:relative; overflow:hidden;}
    .orderSure .shopNameHead .shopNameBg{position:absolute; top:0; left:0; width:100%; height:100%;filter: blur(3px);}
    .orderSure .selSype{margin-top:3.2vw;}
    .orderSure .shopNameHead b{width:100%; height:100%; background:rgba(255,255,255,.4); position:absolute; top:0; left: 0;}
    .orderSure .shopNameHead i{width:8vw; height:21.8vh; background-image:url(../assets/img/img_biao@2x.png); background-repeat:no-repeat; background-size:8vw 21.8vh; background-position:top left; position:absolute; top:0; left: 0; font-size:2vh; color:#fff; font-style:normal; letter-spacing:2vw; padding-left:2vw; padding-top:5vw; line-height:2.4vh;}
    .btn{position: fixed; bottom:8vh; left:0; width:100%; height:9vh; background-color:#f5f5f9; z-index:900;}
    .btn button{height:6.7vh; background-color:#b49436; margin:0 auto; width: 85.6vw; margin-top:1.1vh; border:0; border-radius:1.4vw; display:block; color:#fff; font-size:4.8vw;}
    .weui-cells__title{display:none;}
</style>
